<template>
  <div class="sort">
       <div class="count">
           <span class="number">藏品共计&nbsp;&nbsp;<span style="font-size: 18px; color: #f7f7f8"
            >{{ total }}&nbsp;&nbsp;</span
          >件</span>
           <div class="classification">
             <i class="iconfont icon-fenlei" @click="drawer=true"></i>
             <el-drawer
                :visible.sync="drawer"
                :with-header="false"
                custom-class="options"
                 v-model="drawer"
                size="25%">
                <span class="title">全部分类</span>
                <template v-for="(item,index) in dropGroup">
                    <div class="sheet" :key="index">
                    <span class="type">{{ item.label }}</span>
                    <div class="condition-box">
                        <el-select
                            v-model="item.value"
                            clearable
                            filterable
                            style="margin-left: 20px;"
                            :placeholder="'请选择'+item.label"
                            :popper-append-to-body="false">
                            <el-option
                            v-for="(val,i) in item.options"
                            :key="i"
                            :label="val.label"
                            :value="val.classificationCode">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                </template>
                <div class="sheet-footer">
                          <span class="btn btn-reset" @click="filterReset">重置</span>
                          <span class="btn btn-search" @click="sortSearch">搜索</span>
                        </div>
            </el-drawer>
           </div>
       </div>
       <Pages  
       v-if="isGetRelics" 
       :allDate="relics"
       :pageSize="pageSize"
       :total="total"></Pages>
  </div>
</template>

<script>
import Pages from '@/components/Pages.vue'
import {searchRelics} from '@/api/all'
import {mapState,mapMutations} from "vuex"
export default {
  components:{
    Pages
  },
  props:{
    LocalTypeList:{ 
      type: Array,
      default(){}
    },
    groupTypeList:{ 
      type: Array,
      default(){}},
    decadeTypeList:{ 
      type: Array,
      default(){}},
  },
  computed:{
    ...mapState('sort',["StatesortParams"]),
  },
   data(){
    return{
    isGetParams:false,
      total:0,//总条数
      pageSize:15,//每页多少条
      isGetRelics:false,
      relics:[], //返回的文物数据
      drawer:false,
      sortParams:{
        groupType:'0',
        decadeType:'0',
        localType:'0',

      }, //筛选参数
      dropGroup:[
          {
              key:"groupType",
              label:"分类",
              value:"",
              default:"0",
              options:[]
          },{
              key:"decadeType",
              label:"年代",
              value:"",
              default:"0",
              options:[]
          },{
              key:"localType",
              label:"地域",
              value:"",
              default:"0",
              options:[]
          }
      ]
    }
   },
   mounted(){
    this.dropGroup.forEach((element) => {
          element.value=this.StatesortParams[element.key]
        });
    //从父组件Home获取后端分类接口传值
    this.dropGroup[0].options=this.groupTypeList
    this.dropGroup[1].options=this.decadeTypeList
    this.dropGroup[2].options=this.LocalTypeList
    //初始默认搜索全部
    this.sortSearch()
   },
   methods:{
    ...mapMutations('sort',["SET_RELICS","SET_SORTPARAMS"]),
    filterReset(){
     // 给搜索类型赋默认值
     this.dropGroup.forEach((element) => {
      element.value = element.default;
    });
    },
    sortSearch(){
      let sortParams = {};
      this.dropGroup.forEach((element) => {
        sortParams[element.key]=element.value
    });
      this.sortParams = sortParams;
      console.log("传参sortParams",this.sortParams)
      this.drawer=false //点击搜索关闭筛选
      this.sumAll()
    },
    async sumAll(updateTotal=true){
      let params=this.sortParams
      if(updateTotal){ //是否可以筛选搜索
           await searchRelics(params).then(res=>{
            if(res.data.code===200){
              console.log(res)
              this.relics=res.data.data.relics;
              this.SET_SORTPARAMS(this.sortParams) //把筛选过的参数存入State
              this.SET_RELICS(this.relics)
              this.total=res.data.data.total
              this.isGetRelics=true
            }
            }).catch(error=>{
              console.log(error)
          }); 
      }

    }
   }
}
</script>

<style scoped>
.sort{
    background: #5f806f;
    font-size:25px;
}
.count{
    background: #5f806f;
    display: flex;
    height:70px;
    width: 100%;
    border-bottom:1px solid #fff;
    margin-top:80px;
    justify-content:space-between;
    align-content: space-between;
}
.number{
    color:#F2F3F4;
    font-size:20px ;
    padding-left: 150px;
    margin-top: 15px;
}
.classification{
    color:#F2F3F4;
    margin-right: 100px;
    margin-top: 15px;
}
.iconfont{
    font-size:32px !important;
}
#selection{
  display: none;
}
.title{
    display: block;
    font-size:22px;
    height:50px;
    line-height: 50px;
    text-align: center;
    color:rgb(14, 15, 15);
    padding:10px 0px;
    font-weight: bold;
}
.type{
    color:#1e201f ;
    font-size:18px;
    font-weight: bold;
    display: block;
    height:50px;
    line-height: 50px;
    padding-left:30px;
}
.el-select{
    width:320px !important;
}
.el-select-dropdown__list .selected{
    color: #215c3d !important;
}
.options{
  background: #FFFFFF !important;
}
.sheet-footer{
  display: flex;
  justify-content: space-between;
  box-shadow: 1px -1px 20px #f2f2f2 ;
  width:100%;
  box-sizing: border-box;
  position: relative;
  margin-top:280px;
}
.btn{
  flex: 1;
  width: 40%;
  background: #FFFFFF;
  font-size:15px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  /* display: inline-block; */
  border: 1px solid #215c3d;
  border-radius: 5px;
  box-shadow: 1px 1px 20px #d4d3d3 ;
}
.btn-reset {
  color:#215c3d;
  margin-right: 30px;
}
.btn-reset:hover{
  color:#327e55;
}
.btn-search {
  background: #215c3d;
  color:#FFFFFF;
}
.btn-search:hover{
  color:#fff6f6;
  background: #3a9162;
}
</style>